<template>
    <div class="box">
        <van-swipe ref="vswipe" class="my-swipe" 
        @change="onChange" vertical>
            <van-swipe-item v-for="video in videos" :key="video.id">
                <video autoplay muted controls :src="video.url"></video>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
    import {getVideos} from '@/request'
    import Vue from 'vue';
    import { Swipe, SwipeItem } from 'vant';
    
    Vue.use(Swipe);
    Vue.use(SwipeItem);
    
    export default {
        data () {
            return {
                videos: [],
                // 定义当前轮播选项的下标
                current: 0
            }
        },
        created() {
            this.request()
        },
        updated() {
            this.updateing()
        },
        methods: {
            async request() {
                this.videos = await getVideos()
            },
            onChange(index) {
                this.current = index
                this.updateing()
            },
            updateing() {
                var vs = document.querySelectorAll('video')
                // 获取到当前正在轮播的video
                var video = vs[this.current]
                // 绑定事件 - 当开始播放的时候，提高音量
                video.onplay = () => {
                    // video.muted = false
                    // if(video.currentTime >= 5) {
                    // video.muted = false
                    // }
                    video.volume = 1
                }
                // 绑定事件 - 当播放完成后，切换到下一个轮播
                video.onended = () => {
                    // 切换
                    this.$refs.vswipe.next()
                }
            }
        }
    }
</script>
    
<style scoped>
    .box{
        padding: 0 20px 0 10px;
    }
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 95vh;
    }
    video{
        height: 95vh;
        width: 100%;
    }
</style>